import React, { Component } from 'react';
import AllgoodHead from '../../components/Allgood.jsx/AllgoodHead';
import { Skeleton } from 'antd-mobile'
import './Allgood.scss'
import { good_list } from '../../utils/api'
import { Toast } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

class Allgood extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodlist: [],
            util: "true",
        }
    }
    componentDidMount() {
        // 获取路由参数（三级分类id）
        // console.log(this.props.location.state.id);
        // 请求这个三级分类的所有商品
        if (this.props.location.state.id && this.props.location.state) {
            good_list({ id: this.props.location.state.id }).then((res) => {
                console.log(res.data);
                if (res.data.code == 200) {
                    // 保存所有商品
                    this.setState(
                        this.state.goodlist = res.data.list
                    )
                } else {
                    Toast.show({
                        icon: 'fail',
                        content: '没有该类商品！',
                    })
                    this.props.history.go(-1)
                }

            });
        }


    }

    togoodinfo(id) {
        this.props.history.push({ pathname: '/goodinfo', state: { id } })
    }
    render() {
        return (
            <div className='Allgood'>
                <AllgoodHead></AllgoodHead>
                <div className='box'>
                    {

                        this.state.goodlist.length == 0 ?
                            <>
                                <Skeleton.Title animated />
                                <Skeleton.Paragraph lineCount={5} animated />
                            </> :
                            this.state.goodlist.map((item, index) => {
                                return (
                                    <div className="item" key={index} onClick={() => { this.togoodinfo(item.id) }}>
                                        <img src={item.pic} alt="" />
                                        <div className="text">
                                            <p>{item.name}</p>
                                            <span className='price'>原价￥430</span>
                                            <p className='pri'><span className='qiang'>活动价 ￥</span>{parseInt(item.salesPrice.value)}</p>
                                        </div>
                                    </div>
                                )

                            }
                            )


                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Allgood);